<template>
	<div class="app-control-appmenu--icon">
		<van-row class="app-control-appmenu--icon__container">
			<van-col
				v-for="icon in menus"
				:key="icon.name"
				span="6"
				class="app-control-appmenu--icon__item"
				@click="handleMenuClick(icon)"
			>
				<AppIcon
					class="app-control-appmenu--icon__icon"
					:iconClass="icon.iconClass"
					:imgPath="icon.imgPath"
					v-bind="getDynaProps(icon)"
				></AppIcon>
				<div class="app-control-appmenu--icon__caption">{{ icon.caption }}</div>
			</van-col>
		</van-row>
	</div>
</template>
<script setup lang="ts">
import { menuProps } from '../app-menu';
const props = defineProps(menuProps);
const emit = defineEmits(['menuClick']);
const handleMenuClick = (item: any): void => {
	emit('menuClick', item.name);
};
const getDynaProps = (item: any) => {
	return item.counterId ? { badge: props.counterData[item.counterId] } : null;
};
</script>
